import {useState,useEffect} from 'react'
import styles from './addmap.module.css'
import { NavBar,Cell,Input,Button,Toast  } from 'react-vant';
import {useNavigate,useSearchParams} from 'react-router-dom'
import {api} from '../../luyou/index'
export default function Addmap() {
    const navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const jingdu= searchParams.get('jingdu')
    const weidu=searchParams.get('weidu')
    const [value, setValue] = useState('');
    let [name,setName] = useState('')
    let [phone,setPhone] = useState('')
    let [area,setArea] = useState('')
    let [address,setAddress] = useState('')
    let [flag,setFlag] = useState(false)
    //手机号校验规则
    let reg=/^1[3-9]\d{9}$/
    useEffect(()=>{
      if(jingdu&&weidu){
        // console.log(jingdu,weidu)
        setArea(jingdu+weidu)
      }
    },[jingdu,weidu])
    let addaddress=async()=>{
      let {data}=await api.post('/addaddress',{name,phone,diqu:area,xiangxidizhi:address})
      if(data.code==200){
        Toast.success('添加成功')
        navigate('/address')
      }
    }
  return (
    <>
         <NavBar
            title="添加我的地址"
            leftText="返回"
            onClickLeft={() => navigate('/address')}
        />
         <Cell title='选择地址' onClick={() => navigate('/map')} isLink />
         <p>联系人</p>
         <Input
          value={name}
          onChange={text => setName(text)}
          placeholder='请输入联系人'
          clearable
          className={styles.inp}
        />
         <p>联系电话</p>
         <Input
          value={phone}
          onChange={text => setPhone(text)}
          placeholder='请输入联系电话'
          clearable
          className={styles.inp}
          onBlur={()=>{reg.test(phone)?setFlag(false):setFlag(true)}}
        />
        <span className={flag?styles.xian:styles.xiao}>请输入正确的手机号</span>
         <p>所属地区</p>
         <Input
          value={area}
          onChange={text => setArea(text)}
          placeholder='请输入所属地区'
          clearable
          className={styles.inp}
        />
         <p>详细地址</p>
         <Input
          value={address}
          onChange={text => setAddress(text)}
          placeholder='请输入详细地址'
          clearable
          className={styles.inp}
        />
        <div className={styles.box4}>
         <Button className={styles.btn} onClick={()=>addaddress()}>保存</Button>
        </div>
          
    </>
  )
}
